<template>
    <div v-resize="handleResize" class="ivu-mt-16">
        <div class="ivu-title">
            <row type="flex" justify="center" align="middle">
                <Col span="8">
                    <h3>治疗统计</h3>
                </Col>
                <Col span="16" class="ivu-text-right">
                    <RadioGroup v-model="visitType" type="button" class="ivu-mr-8" @on-change="handleChangeVisitType">
                        <Radio label="day">今日</Radio>
                        <Radio label="month">本月</Radio>
                        <Radio label="year">全年</Radio>
                    </RadioGroup>
                    <DatePicker v-model="visitDate" type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
                </Col>
            </row>
        </div>
        <base-info />
        <Card :bordered="false" dis-hover v-height="480">
            <div slot="title">
                <Avatar icon="md-podium" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
                <span class="ivu-pl-8">治疗频次统计</span>
            </div>
            <frequency ref="frequency" />
        </Card>
    </div>
</template>
<script>
    import baseInfo from './base-info';
    import frequency from './frequency';
    export default {
        name: 'dashboard-monitor',
        components: { baseInfo, frequency },
        data () {
            return {
                visitType: 'day', // day, month, year
                visitDate: [(new Date()), (new Date())],
                formItem: [
                    {
                        select: ''
                    }
                ]
            }
        },
        methods: {
            handleChangeVisitType (val) {
                if (val === 'day') {
                    this.visitDate = [(new Date()), (new Date())];
                } else if (val === 'month') {
                    this.visitDate = [(new Date() - 86400000 * 30), (new Date())];
                } else if (val === 'year') {
                    this.visitDate = [(new Date() - 86400000 * 365), (new Date())];
                }
            },
            // 监听页面宽度变化，刷新表格
            handleResize () {
                // console.log('::', this.$refs.baseInfo)
                // this.$refs.baseInfo.handleResize();
                this.$refs.visitChart.handleResize();
            }
        }
    }
</script>
<style lang="less" scoped>
    .dashboard-console-visit{
        .ivu-radio-group-button .ivu-radio-wrapper{
            border: none !important;
            box-shadow: none !important;
            padding: 0 12px;
        }
        .ivu-radio-group-button .ivu-radio-wrapper:before, .ivu-radio-group-button .ivu-radio-wrapper:after{
            display: none;
        }
    }
    .ivu-mt-64 {
        margin-top:64px;
    }
    .ivu-title {
        margin-bottom:20px;
    }
    .ivu-title h3{
        font-size:16px;
    }
</style>
